<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">
        文章列表
      </div>
      <div class="container-fluid common_con">
        <div class="row opt_btns">
          <div class="col-xs-6">
            <form class="form-inline">
              <select
                id="selCategory"
                name=""
                class="form-control input-sm"
                v-model="categoryId"
              >
                <option value="">所有分类</option>
                <option
                  v-for="item in categoryList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</option
                >
              </select>
              <select
                id="selStatus"
                name=""
                class="form-control input-sm"
                v-model="state"
              >
                <option value="">所有状态</option>
                <option value="草稿">草稿</option>
                <option value="已发布">已发布</option>
              </select>
              <button
                id="btnSearch"
                class="btn btn-default btn-sm"
                @click.prevent="page=1;reload()"
              >
                筛选
              </button>
            </form>
          </div>
          <div class="col-xs-6">
            <a
              href="javascript:;"
              class="btn btn-success btn-sm pull-right"
              id="release_btn"
              @click="$router.push('/articleRelease')"
              >发表文章</a
            >
          </div>
        </div>
        <table class="table table-striped table-bordered table-hover mp20">
          <thead>
            <tr>
              <th>标题</th>
              <th>作者</th>
              <th>分类</th>
              <th class="text-center">发表时间</th>
              <th class="text-center">状态</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in articleList" :key="item.id">
              <td>{{ item.title }}</td>
              <td>{{ item.author }}</td>
              <td>{{ item.category }}</td>
              <td class="text-center">{{ item.date }}</td>
              <td class="text-center">{{ item.state }}</td>
              <td class="text-center">
                <a href="javascript:;" class="btn btn-default btn-xs"
                @click="$router.push({name:'articleEdit', params: {id: item.id}})"
                  >编辑</a
                >
                <a
                  href="javascript:void(0);"
                  class="btn btn-danger btn-xs delete"
                  @click="deleteArticle(item.id)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
        <div class="row text-center">
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-count="totalPage"
            :current-page.sync="page"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleCategory, getArticleList, deleteArticle } from './article.js'
export default {
  name: 'articleList',
  data () {
    return {
      categoryList: [], // 分类列表
      articleList: [], // 文章列表
      categoryId: '', // 分类Id,与下拉框双向绑定，下拉框选中哪个就获取哪个的id
      state: '', // 文章状态,也是双向绑定
      totalPage: 0, // 总页数
      page: 1 // 当前页,默认为1
    }
  },
  methods: {
    // 封装加载数据函数
    async reload () {
      // 文章分类
      let res1 = await getArticleCategory()
      // console.log(res1);
      this.categoryList = res1.data.data
      // 文章列表
      let res2 = await getArticleList({
        type: this.categoryId,
        state: this.state,
        page: this.page,
        perpage: 10
      })
      // console.log(res2);
      this.articleList = res2.data.data.data
      // 保存后台返回的总页数
      this.totalPage = res2.data.data.totalPage
    },
    // 分页点击事件
    changePage(page){
      // 修改当前需显示的页码
      this.page = page
      console.log(this.page);
      // 重新加载数据
      this.reload()
    },
    // 删除事件
    async deleteArticle(id){
      // 判断是否为最后一条数据
      if(this.articleList.length == 1){
        this.page--
      }
      let res = await deleteArticle(id)
      // console.log(res);
      this.reload()
    }
  },
  created () {
    // 页面进来需要加载数据
    this.reload()
  }
}
</script>

<style></style>
